<template>
  <div class="permission">
    <head-tool>
      <template #right>
        <el-button @click="showAdd('0')" type="primary">添加权限</el-button>
      </template>
    </head-tool>
    <el-card style="margin-top:20px;">
      <el-table
        :data="tableData"
        row-key="id"
        default-expand-all
        border
        style="width: 100%"
      >
        <el-table-column prop="name" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="code" label="标识" width="180">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作">
          <!-- 解构出了scope这个对象里的row -->
          <template v-slot="{ row }">
            <el-button v-if="row.pid == '0'" @click="showAdd(row.id)" type="text">添加</el-button>
            <el-button @click="doEdit(row.id)" type="text">编辑</el-button>
            <el-button @click="del(row.id)" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增的对话框 -->
    <el-dialog @close="close" :title="title" :visible.sync="showPermDialog">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item prop="name" label="权限名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="code" label="权限标识" :label-width="formLabelWidth">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="权限描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开启" :label-width="formLabelWidth">
          <!-- active-color:就是设置开启的颜色 -->
          <!-- inactive-color:就是设置关闭的颜色 -->
          <!-- 它默认情况下拿到的是true和false -->
          <el-switch
            v-model="form.enVisible"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入接口
import { getPermissionList, removePermission, addPermission, getPermissionDetail,updatePermission } from '@/api/permission'
// 封装了一个递归转树的函数
import { arrayToTree } from '@/utils'
export default {
  name: 'permission',
  data () {
    return {
      tableData: [],
      showPermDialog: false,
      rules: {
        name: [
          { required: true, message: '请输入权限名', trigger: 'blur'}
        ],
        code: [
          { required: true, message: '请输入权限标识', trigger: 'blur'}
        ]
      },
      form: {
        name: '',
        code: '',
        description: '',
        enVisible: '1'
      },
      formLabelWidth: '80px'
    }
  },
  methods: {
    async doEdit (id) {
      // 当点击编辑，就拿到被点的id，根据这个id查出详细的数据
      const res = await getPermissionDetail(id)
      // 把数据给对话框里的表单去显示
      this.form = res.data
      // 显示出对话框
      this.showPermDialog = true
    },
    // 对话框关闭的事件
    close () {
      this.form = {
        name: '',
        code: '',
        description: '',
        enVisible: '1'
      }
      // 去掉表单规则
      this.$refs.form.resetFields()
    },
    // 确定的点击事件
    async save () {

      try {
        // 整个表单校验
        await this.$refs.form.validate()
        
        // 判断是新增还是修改
        if (this.form.id) {
          // 修改
          await updatePermission(this.form)
          this.$message.success('修改成功')
          
        }else {
        // 能来到这证明校验通过
        // 发请求即可
        await addPermission(this.form)
        this.$message.success('添加成功')
        }

        this.showPermDialog = false
        // 刷新数据
        this.loadData()
      }catch {}
    },
    // 添加的点击事件
    showAdd (pid) {
      // 显示出新增对话框
      this.showPermDialog = true
      // 把点击的pid传递到form方便后面发请求
      this.form.pid = pid
      // 看pid是否为0，为0代表1级权限，否则为2级权限
      this.form.type = pid == '0' ? 1 : 2
    },
    async loadData () {
      const res = await getPermissionList()
      // 找到1级菜单并遍历里面的子菜单
      this.tableData = arrayToTree(res.data, '0')
    },

    // 删除
    async del (id) {
      // 弹出确认框
      try {
        await this.$confirm('是否确定要删除？')
        // 能到这证明点了确定
        await removePermission(id)
        this.$message.success('删除成功')
        this.loadData()
      } catch {}
    }
  },
  created () {
    // 调用加载数据
    this.loadData()
  },

  computed: {
    title () {
      return this.form.id ? '编辑权限' : '添加权限'
    }
  }
}
</script>

<style lang="scss" scoped>
.permission {
  padding: 20px;
}
</style>
